<!doctype html>
<html>

<head>
    <title>
        Responsive Design - Task 1
    </title>
    <link rel="stylesheet" type="text/css" href="styles/task1.css">
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>
                <a href="#">Site Logo</a>
            </h1>
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Info</a>
                    </li>
                    <li>
                        <a href="#">Contacts</a>
                    </li>
                </ul>
            </nav>
        </header>
        <section>
            <header>
                <div class="slider">
                    <ul>
                        <li class="slider-current">
                            <h2>
                                Lorem ipsum dolor sit amet
                            </h2>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
                                luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
                                pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
                                gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
                                auctor ut. Duis adipiscing venenatis tempus. Integer vel justo nulla. Maecenas
                                elit quam, laoreet non cursus vel, facilisis scelerisque velit. Duis eu
                                nisi pellentesque libero sollicitudin euismod. Pellentesque mattis, sem
                                ac convallis fermentum, metus neque blandit diam, non euismod est orci
                                quis mi. Curabitur mattis dictum nisl, eget dapibus sapien viverra mollis.
                                Maecenas eleifend lacus eu magna bibendum venenatis.
                            </p>
                        </li>
                        <li>
                            <h2>
                                Class aptent taciti sociosqu
                            </h2>
                            <p>
                                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                inceptos himenaeos. Phasellus gravida odio id ligula mollis sagittis volutpat
                                mauris commodo. Cras sit amet luctus tellus. In hac habitasse platea dictumst.
                                Proin scelerisque ultrices justo vitae ornare. Nullam adipiscing, magna
                                et vehicula accumsan, nulla mi elementum est, id iaculis magna purus eu
                                neque. Maecenas congue, est hendrerit posuere posuere, nisl lectus pellentesque
                                est, sodales pretium purus purus et velit. In hac habitasse platea dictumst.
                                Mauris ut enim eget libero luctus faucibus non molestie est. Suspendisse
                                potenti. Praesent eu mauris tortor, quis condimentum mauris.
                            </p>
                        </li>
                        <li>
                            <h2>
                                Aenean porta
                            </h2>
                            <p>
                                Aenean porta, nibh non pulvinar iaculis, ipsum augue varius arcu, placerat
                                placerat augue erat a magna. Praesent commodo congue pretium. Fusce id
                                posuere tortor. Phasellus ante nunc, blandit et congue nec, rhoncus ut
                                est. Nulla pellentesque placerat arcu, in gravida nisl pretium eu. Aliquam
                                sed eros quis sapien tempor dictum. Proin convallis mollis orci, vel ullamcorper
                                felis venenatis at. Nullam pharetra, elit quis euismod vulputate, lectus
                                orci sagittis nibh, ac pretium nisl nulla eu diam. Sed tempor dolor non
                                lorem tincidunt hendrerit. Ut dolor arcu, euismod quis adipiscing in, adipiscing
                                eget dolor. Pellentesque ac lectus tempus ipsum tincidunt aliquet. Nam
                                iaculis viverra molestie. Duis sed leo ut elit rhoncus tincidunt sed in
                                felis. Nam elementum venenatis est, pulvinar hendrerit tortor convallis
                                et. Aenean tristique suscipit pharetra. Aenean molestie ultrices dui, volutpat
                                aliquam lectus tristique sed.
                            </p>
                        </li>
                        <li>
                            <h2>
                                Vivamus ac metus justo
                            </h2>
                            <p>
                                Vivamus ac metus justo, quis consectetur orci. Suspendisse blandit suscipit
                                mi, eu scelerisque elit facilisis vel. Vivamus varius elit vel enim laoreet
                                dictum. Vestibulum et augue magna, id blandit mauris. Proin posuere ante
                                eget lorem ornare fringilla. Sed enim elit, posuere at gravida ut, pretium
                                eget arcu. Nunc ornare, mauris venenatis convallis eleifend, mauris justo
                                mollis arcu, vitae pharetra ipsum justo nec nisi. Pellentesque sollicitudin,
                                felis ac viverra suscipit, nunc turpis aliquam dolor, at sagittis est felis
                                ac dui.
                            </p>
                        </li>
                        <li>
                            <h2>
                                Nulla facilisi
                            </h2>
                            <p>
                                Nulla facilisi. Mauris facilisis odio vel leo placerat ullamcorper. Suspendisse
                                potenti. Morbi porta cursus lectus. Proin varius tincidunt condimentum.
                                Vivamus mollis, dolor luctus faucibus tincidunt, metus nisi rutrum augue,
                                et dignissim libero nisl ut nunc. Nam sollicitudin magna vitae metus vestibulum
                                ut malesuada metus hendrerit.
                            </p>
                        </li>
                    </ul>
                    <div class="slider-controls">
                        <a href="#" class="slider-prev">prev</a>
                        <a href="#" class="slider-next">next</a>
                    </div>
                </div>
            </header>
            <article>
                <header>
                    <h1>
                        Article 1
                    </h1>
                </header>  
                    <div class="article-content">
                        <img src="images/pc-1.png" />
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
                            luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
                            pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
                            gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
                            auctor ut. Duis adipiscing venenatis tempus
                        </p>
                    </div>              
            </article>
            <article>
                <header>
                    <h1>
                        Article 2
                    </h1>
                </header>
                    <div class="article-content">
                        <img src="images/pc-2.png" />
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
                            luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
                            pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
                            gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
                            auctor ut. Duis adipiscing venenatis tempus
                        </p>
                    </div>
            </article>
            <article>
                <header>
                    <h1>
                        Article 3
                    </h1>
                </header>
                    <div class="article-content">
                        <img src="images/trash-bin.png" />
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
                            luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
                            pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
                            gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
                            auctor ut. Duis adipiscing venenatis tempus
                        </p>
                    </div>
            </article>
        </section>
        <footer>
            <h2>
                Telerik Software Academy - Slice and Dice Course
            </h2>
        </footer>
    </div>
</body>

</html>
